<template>
  <div>
    <van-nav-bar fixed>
      <template #title>
        <van-search shape="round" placeholder="请输入搜索关键词" />
      </template>
    </van-nav-bar>
    <!-- 左边 -->
    <div style="font-size:16px" class="box">
      <div class="classify-content">
        <div class="left-content">
          <div class="left-item-content">
            <p
              v-for="(item,index) in left"
              :key="index"
              :class="{'active':activeKey===index}"
              @click="click(index)"
            >{{item.name}}</p>
          </div>
        </div>
        <!-- 右边 -->
        <div class="right-content">
          <div class="right-item-content" v-for="(item,index) in right" :key="index">
            <div class="img">
              <img :src="item.icon" />
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      About: [],
      activeKey: 0,
      left: [],
      right: [],
    };
  },
  created() {
    this.left.push({
      name: "所有分类",
      pid: 0,
    });
    this.$Acc.Yanxuan_LIST().then((res) => {
      this.About = res.data.data;
      this.About.forEach((ele) => {
        if (ele.pid === 0) {
          this.left.push(ele);
          // console.log(this.left)
        } else {
          this.right.push(ele);
        }
      });
    });
  },
  methods: {
    click(index) {
      this.activeKey = index;
      var temp = this.left[this.activeKey].id;
      console.log(temp);
      this.right = [];
      if (this.activeKey === 0) {
        this.left = [];
        this.left.push({
          name: "所有分类",
          pid: 0,
        });
        this.About.forEach((ele) => {
          if (ele.pid === 0) {
            this.left.push(ele);
          } else {
            this.right.push(ele);
          }
        });
      } else {
        this.About.forEach((ele) => {
          if (ele.pid === temp) {
            this.right.push(ele);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.Yanxuan_swipe{
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 2rem;
  left: 4rem;
}
.classify-content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left-content {
  width: 24.8%;
  height: 33rem;
  border-right: 1px solid whitesmoke;
  position: fixed;
  top: 5rem;
  left: 0px;
}
.right-content {
  width: 75%;
  height: 34.5rem;
  overflow: scroll;
  position: fixed;
  top: 3.5rem;
  left:6rem;
}
.left-item-content p {
  text-align: center;
  height: 3rem;
  line-height: 3rem;
}
.right-item-content {
  width: 42%;
  height: 7rem;
  float: left;
  margin-left: 1.2rem;
  margin-right: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.img img {
  width: 100%;
  height: 4rem;
}
.active {
  color: red;
  border-left: 2px solid red;
}
</style>